<template>
  <div class="soldout-big-box">
    <van-empty
      class="custom-image"
      image="https://img.yzcdn.cn/vant/custom-empty-image.png"
      description="快去发布房源吧~"
      slot="houseItem"
      v-if="houseList.length == 0"
    />
    <div v-for="item of houseList" :key="item.id" v-else class="houseItem-box">
      <house-item
        :houseItem="item"
        :imgPath="staticpath+item.images[0].path"
      >
        <span slot="isshelf" class="ishotSpan" v-if="item.isHot == 1">{{item.isShelf | isShelfState}}</span>
      </house-item>
      <div class="soldout-box-content">
        <div class="soldout-box" @click="toPutaway(item.id)">点击上架</div>
      </div>
    </div>
  </div>
</template>

<script>
import { queryHouseState, soldOutHouse } from "network/rentstate";

import HouseItem from "components/common/houseitem/HouseItem";

export default {
  name: "",
  components: {
    HouseItem,
  },
  data() {
    return {
      houseList: [],
      staticpath: localStorage.getItem("staticpath"),
    };
  },
  methods: {
    toPutaway(id) {
      let isShelf = 1;
      soldOutHouse({ id, isShelf }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.$toast({
            message: "上架成功",
            position: "bottom",
          });
          this.toQueryHouseState();
        } else {
          this.$toast({
            message: "服务器错误,下架失败",
            position: "bottom",
          });
        }
      });
    },
    toQueryHouseState() {
      let userId = localStorage.getItem("userId");
      let code = 5;
      queryHouseState({ userId, code }).then((res) => {
        console.log(res);
        this.houseList = res.data;
      });
    },
  },
  activated() {
    console.log(this.$route.path);
    this.toQueryHouseState();
  },
  filters: {
    CheckState(val) {
      return val == "1" ? "审核通过" : val == "2" ? "未审核" : "审核未通过";
    },
    isShelfState(val) {
      return val == 1 ? "" : "已下架";
    },
  },
};
</script>

<style scoped>
.stateSpan {
  font-size: 12px;
  padding: 2px 4px;
  color: #fff;
}
.ishotSpan {
  font-size: 12px;
  padding: 2px 4px;
  color: #fff;
  background-color: red;
}
.green {
  background-color: green;
}
.yellow {
  background-color: rgb(236, 236, 58);
}
.red {
  background-color: red;
}
.publicTime-box {
  font-size: 12px;
  color: #666;
}
.houseItem-box {
  padding-top: 10px;
  border-bottom: 10px solid #fff;
  background-color: rgba(100, 100, 100, 0.1);
}
.soldout-box-content {
  display: flex;
  justify-content: flex-end;
}
.soldout-box {
  font-size: 13px;
  margin: 0 15px 8px 0;
  height: 25px;
  width: 60px;
  line-height: 25px;
  text-align: center;
  border: 1px solid #ccc;
}
.houseItem-box .houseName span {
  background-color: #ccc;
}
</style>